<template>
	<view class="stationDetails">
		<view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
		  <back :page-scroll-top="PageScrollTop"/>
		</view>
		<swiper class="swiper-box" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in infor.thumb" :key="index">
				<image :src="item" class="swiper-item"></image>
			</swiper-item>
		</swiper>
		<view class="station-content">
			<view class="content-detail">
				<view class="flex-box title">
					<view class="box-1">
					{{infor.title || ''}}
					</view>
					<text class="distance" v-if="infor.distance>0">距离您{{infor.distance}}m</text>
				</view>
				<view class="line"></view>
				<view class="detail-model">
					<view class="msg" v-if="infor.business_hours">
						营业{{infor.business_hours}}
					</view>
					<view class="msg flex-box">
						评分 <u-rate  gutter="1" size="10" :value="4" :count="5" readonly></u-rate>
					</view>
				</view>
				<view class="line"></view>
				<view class="flex-box detail-model">
					<image src="@/static/img/map.png" class="icon-map"></image>
					<view class="one-omit box-1">
						{{infor.address || ''}}
					</view>
					<view class="btn" @click="toMap(infor)">
						到这里去
					</view>
				</view>
				<view class="line"></view>
				<view class="flex-box detail-model" v-if="infor.phone">
					<view class="tel box-1">
						{{infor.phone || ''}}
					</view>
					<view class="btn" @tap="callFun(infor.phone)">
						立即拨打
					</view>
				</view>
			</view>
		</view>
		<view class=" flex-box recommend">
			<text class="line"></text>
			<text class="text">精选推荐</text>
			<text class="line"></text>
		</view>
		<view class="goods-data">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<goods-item  v-if="goodsList.length" :goodsList="goodsList" ></goods-item>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import { wxconfig } from "@/utils/mixin-wxconfig.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import back from "@/components/headback/back.vue";
	export default {
		  components: {
			back,
		  },
		mixins: [MescrollMixin,wxconfig], 
		data() {
			return {
				id:'',
				infor:{},
				goodsList:[],
				page: 1,
				pageSize: 20,
				PageScrollTop:0,
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getData()
		},
		methods:{
			onPageScroll(e) {
				this.PageScrollTop = e.scrollTop;
			},
			//拨打电话
			callFun(val){
				// #ifdef H5
				window.location.href = `tel:${val}`
				// #endif
			},
			getData(){
				let latitude = uni.getStorageSync('mylatitude');
				let longitude =  uni.getStorageSync('mylongitude');
				this.$u.api.storeDetail({
						id:this.id,
						lat:latitude,
						lng:longitude
					}).then(res => {
					if (res.status) {
						console.log(res)
						this.infor = res.msg
					}
				})
				.catch(err => {
					console.log(err);
				})
			},
			toMap(){
				wx.ready(()=>{
					wx.openLocation({
						latitude: parseFloat(this.infor.lat),
						longitude: parseFloat(this.infor.lng),
						name: this.infor.title, // 位置名
						address: this.infor.address, // 地址详情说明
						scale: 17, // 地图缩放级别,整型值,范围从1~28。默认为最大
						infoUrl: '',
						success:(res)=>{
							console.log('成功',res);
						},
						fail:(err)=>{
							console.log('失败',err);
						}
					 })
			 })
			},
			onGoodsList(id){
				uni.navigateTo({
					url: '/pages/GoodsDetails/lrGoodsDetails?id='+id
				})
			},
			/*上拉加载的回调*/
			  upCallback(page) {
			    //联网加载数据
				  let _this = this
			   this.$u.api.indexGoodsList({
					page: page.num,
					flags:'service'
				   }).then(res=>{
			    	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			    	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			    	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			    	this.mescroll.endByPage(_this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
			    	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			    	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
			    
			    	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			    	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
			      
			    	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			    	// this.mescroll.endSuccess(res.list.length);
					if(page.num == 1){_this.goodsList = []}else{} //如果是第一页需手动制空列表
					this.goodsList=this.goodsList.concat(res.msg.list); //追加新数据
			
			    }).catch(()=>{
			    	//联网失败, 结束加载
			    	this.mescroll.endErr();
			    })
			  }
		}
	}
</script>

<style lang="scss">
	page{
		background:#F7F7F7 ;
	}
	.swiper-box{
		width: 100%;
		height: 610rpx;
		.swiper-item{
			width: 100%;
			height: 610rpx;
		}
	}
	.station-content{
		padding:30rpx;
		position: relative;
		z-index:0;
		top:-130rpx;
		box-sizing: border-box;
		background:linear-gradient(transparent 0%,#F7F7F7 50%)
	}
	.content-detail{
		border-radius: 20rpx;
		background:#fff;
		padding:25rpx;
		.title{
			font-size:36rpx;
			color:#333;
			padding-bottom:25rpx;
		}
		.distance{
			color:#555;
			font-size:22rpx;
		}
		.line{
			width: 100%;
			height: 1px;
			border-bottom:1px solid #eee;
		}
		.detail-model{
			padding:40rpx 0;
			font-size: 28rpx;
			.icon-map{
				width:33rpx ;
				display: block;
				height:33rpx ;
				margin-right:20rpx;
			}
			.tel{
				color:$base;
				font-size:30rpx;
			}
			.btn{
				padding:6rpx 20rpx;
				border-radius: 40rpx;
				color:#fff;
				font-size:26rpx;
				background:$base;
			}
			.msg{
				padding-bottom:20rpx;
			}
		}
	}
	.recommend{
		padding:30rpx 0;
		justify-content: center;
		font-weight: bolder;
		font-size:36rpx;
		margin-top:-130rpx;
		.line{
			display: inline-block;
			margin:0 20rpx ;
			width: 40rpx;
			height:4rpx;
			background:#353535;
		}
	}
.goods-data{
	width: 100%;
	padding: 0 20rpx;
	
	.goods-list {
		border-radius: 20rpx;
		background: #fff;
		padding: 0 20rpx;
		overflow: hidden;
		.list-view {
			float: left;
			width: 49%;
			max-height: 560rpx;
			background-color: #F7F7F7;
			border-radius: 20rpx;
			margin-right: 2%;
			margin-bottom: 20rpx;
			overflow: hidden;
			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
	.pictrue {
		width: 100%;
		display: block;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 477rpx;
	}
	.msg-box{
		width: 100%;
		display: block;
		padding:20rpx ;
		.tag {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			white-space: normal;
			font-size: 26rpx;
			line-height: 40rpx;
		}
	} 
	.sell-num{
		font-size:22rpx;
		color:#353535;
	}
	.price-info {
		margin: 20rpx auto 0;
		justify-content: flex-start;
		align-items: flex-end;
		.info-text{
			display: inline-block;
			color:#BB7822;
			font-size:22rpx;
			background-color: #F4E1B7;
			border-radius: 5rpx;
			padding:2rpx 5rpx;
			word-break: keep-all;
		}
		.user-price {
			font-weight: bold;
			color: $price-clor;
	
			.min {
				font-size: 22rpx;
			}
	
			.max {
				font-size: 32rpx;
			}
		}
	}
	
}
</style>
